<link rel="stylesheet" href="css/choose.css" />

<h2>{{currentChoice.name}}</h2>
<ul class="portrait-list" ng-class="{ 'large-items' : (currentChoice.categories.length + currentChoice.characters.length)  == 2 }">
	<li class="portrait-holder" ng-repeat="category in currentChoice.categories">
		<div class="locked-overlay" ng-show="category.disabled"></div> 
		<img class="locked-icon" ng-show="category.disabled" alt="Locked" title="Locked" src="images/misc/lock-icon.png" />
		<button ng-click="setCurrentChoice(category)">
			<img alt="{{category.name}}" title="{{category.name}}" ng-src="{{category.image}}" />
			<span>{{category.name}}</span>
		</button>
	</li>
	<li class="portrait-holder" ng-repeat="character in currentChoice.characters">
		<div class="locked-overlay" ng-show="character.disabled"></div> 
		<img class="locked-icon" ng-show="character.disabled" alt="Locked" title="Locked" src="images/misc/lock-icon.png" />
		<button ng-click="chooseCharacter(character)">
			<img class="portrait" alt="{{character.name}}" title="{{character.name}}" ng-src="{{character.image}}" />
			<span>{{character.name}}</span>
		</button>
	</li>
</ul>

<button ng-show="currentChoice.parent" ng-click="back()" class="transparent-icon-button left" title="Back">
	<img src="images/misc/previous.png" />
</button>